<script setup lang="ts">
import { trayMenu, trayMenuIcon } from '@renderer/types'
import { reactive } from 'vue'
import useSettingStore from '@renderer/stores/modules/setting'
import { watch } from 'vue'
import defaultShotKeysConfig from '@renderer/components/setting/defaultShotKeysConfig'
import { ref } from 'vue'
import { onMounted } from 'vue'
const settingStore = useSettingStore()

const menuList = reactive<trayMenu>([
  {
    name: '开发工具',
    icon: 'code'
  },
  {
    name: '隐藏主程序',
    icon: 'eyes_closed'
  },
  {
    name: '设置',
    icon: 'setting'
  },
  {
    name: '退出',
    icon: 'exit'
  }
])

const showMainProgram = ref(true)

onMounted(async () => {
  const visible = await window.electron.ipcRenderer.invoke('get-main-program-visible')
  menuList[1].icon = visible ? 'eyes_closed' : 'eyes_opened'
  menuList[1].name = visible ? '隐藏主程序' : '显示主程序'
})

const itemClick = (key: trayMenuIcon) => {
  switch (key) {
    case 'setting':
      window.electron.ipcRenderer.send('setting')
      break
    case 'exit':
      window.electron.ipcRenderer.send('exit')
      break
    case 'eyes_opened':
      menuList[1].icon = 'eyes_closed'
      menuList[1].name = '隐藏主程序'
      showMainProgram.value = true
      window.electron.ipcRenderer.send('main-program', showMainProgram.value)
      break
    case 'eyes_closed':
      menuList[1].icon = 'eyes_opened'
      menuList[1].name = '显示主程序'
      showMainProgram.value = false
      window.electron.ipcRenderer.send('main-program', showMainProgram.value)
      break
  }
}

watch(
  () => settingStore.$state.isDevCode,
  (value) => {
    window.electron.ipcRenderer.send(
      'open-dev-mode',
      JSON.stringify({
        modeStatus: value,
        shotKeys: defaultShotKeysConfig
      })
    )
  }
)
</script>

<template>
  <ul class="tray-menu w-full h-full flex flex-col rounded-md overflow-x-hidden overflow-y-auto">
    <li
      v-for="(item, index) in menuList"
      :key="index"
      class="flex items-center py-1 px-[10px] gap-[6px] cursor-pointer hover:bg-[#F6FAFE]"
      @click="itemClick(item.icon as trayMenuIcon)"
    >
      <div class="icon">
        <svg-icon
          :key="item.icon"
          :name="item.icon"
          fill="#000"
          :width="25"
          :height="25"
        ></svg-icon>
      </div>
      <div class="flex-1 flex-shrink-0 flex items-center justify-between">
        <div class="text-xs">{{ item.name }}</div>
        <el-checkbox v-if="item.icon === 'code'" v-model="settingStore.$state.isDevCode">
        </el-checkbox>
      </div>
    </li>
  </ul>
</template>

<style lang="scss" scoped></style>
